@import url("../../style.less");

.page{
	background-color: #eeeef4;
}

.yellow{
	background-color: #f0b52f !important;
}

.red{
	background-color: #f0532f !important;
}

.green{
	background-color: #52a929 !important;
}

.summary-container{
	display: flex;
	/* 两端对齐 */
	justify-content: space-between;
	background-color: #FFFFFF;
	padding: 35rpx;
	margin-bottom: 20rpx;
	.user-info{
		display: flex;
		.photo{
			width: 100rpx;
			height: 100rpx;
		}
		.info{
			display: flex;
			/* 垂直排列 */
			flex-direction: column;
			/* 环绕对齐 */
			justify-content: space-around;
			margin-left: 25rpx;
			.username{
				display: block;
				font-size: 34rpx;
				font-weight: bold;
				color: @font-color;
			}
			.dept{
				display: block;
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
	.date{
		font-size: 38rpx;
		color: @background-color;
	}
}

.result-container{
	display: flex;
	background-color: #FFFFFF;
	padding: 35rpx;
	margin-bottom: 20rpx;
	.left{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 320rpx;
		margin-right: 30rpx;
		/* 父控件相对定位 */
		position: relative;
		.icon-timer{
			width: 40rpx;
			height: 40rpx;
			&:first-child{
				margin-top: 5rpx;
			}
		}
		.line{
			/* 子控件绝对定位 */
			position: absolute;
			height: 220rpx;
			width: 0;
			border-left: 2rpx solid #e5e5e5;
			left: 20rpx;
			top: 55rpx;
		}
	}
	.right{
		.row{
			display: flex;
			margin-bottom: 25rpx;
			.start,.end{
				font-size: 32rpx;
				color: @background-color;
			}
			.checkin-time{
				font-size: 38rpx;
				font-weight: bold;
				color: @font-color;
				/* 父元素flex布局,子元素block模型也能水平排列 */
				display: block;
			}
			.checkin-result{
				/* block模型才能加宽度高度 */
				display: block;
				background-color: #FFFFFF;
				font-size: 26rpx;
				height: 42rpx;
				line-height: 42rpx;
				/* 宽度有时候写2个字,有时候写3个字,不能写死,靠内填充来撑开宽度 */
				padding: 0 5rpx;
				border-radius: 8rpx;
				margin-left: 10rpx;
				color: #FFFFFF;
			}
			.other{
				margin-top: 7rpx;
				margin-left: 10rpx;
			}
			.icon-small{
				width: 38rpx;
				height: 38rpx;
				margin-right: 38rpx;
				margin-top: 7rpx;
			}
			.desc{
				color: #999999;
				font-size: 32rpx;
			}
		}
	}
}

.checkin-report{
	background-color: #FFFFFF;
	padding: 35rpx;
	.big-icon{
		/* mode="widthFix"时设置了宽度,高度会自动缩放 */
		width: 250rpx;
		/* 居中:给元素左右外填充设置相同的填充,前提:控件block模型 */
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.report-title{
		display: flex;
		justify-content: center;
		margin-right: 20rpx;
		.days{
			font-size: 60rpx;
			color: @font-color;
		}
		.unit{
			margin-left: 10rpx;
			margin-top: 28rpx;
		}
	}
	.sub-title{
		font-size: 34rpx;
		color: @font-color;
		text-align: center;
		margin-top: 10rpx;
		/* 父组件相对定位 */
		position: relative;
		/* line是一条长的横线, text通过设置z-index覆盖在line上面 */
		text{
			background-color: #FFFFFF;
			z-index: 999;
			/* z-index要配合位移使用 */
			position: relative;
			padding: 0 30rpx;
			align-self: baseline;
			margin-left: auto;
			margin-right: auto;
		}
		.title-desc{
			display: flex;
			flex-direction: column;
		}
		.line{
			height: 0rpx;
			width: 100%;
			border-bottom: 2rpx solid #e5e5e5;
			/* 子组件绝对定位 */
			position: absolute;
			top: 40rpx;
		}
	}
	.calendar-container{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		.calendar{
			text-align: center;
			/* flex布局会对控件进行拉伸和缩放,希望不拉伸和缩放 */
			// flex-grow: 0;
			// flex-shrink: 0;
			.calendar-icon{
				width: 70rpx;
				display: block;
				margin-bottom: 5rpx;
			}
			.day{
				font-size: 32rpx;
				color: @font-color;
				/* 文字是text标签,要独占一行 */
				display: block;
			}
			.result{
				display: block;
				font-size: 26rpx;
				color: #FFFFFF;
				height: 42rpx;
				line-height: 42rpx;
				padding: 0 5rpx;
				border-radius: 8rpx;
			}
				
		}
	}
	
}